<template>
	<view class="topSearchbox">
		<view class="tjrq">
			<view class="daterange">
				<text class="lb">查询日期：</text>
				<view class="rqbox">
					<text class="rq">{{range[0]}}</text>
					<text> 至 </text>
					<text class="rq">{{range[1]}}</text>
				</view>
			</view>
			<view class="scbtn" @click="showDrawer">
				<image v-if="show" class="close" src="/static/images/close.png" mode="widthFix"></image>
				<image v-else class="img" src="/static/images/xjt.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="searchbox" v-if="show">
			<view class="item">
				<text class="label">查询日期</text>
				<view class="con time">
					<uni-datetime-picker v-if="range.length>0" class="mydpdate" @change="changeDateTime" ref="daterange" v-model="range" type="daterange"
						:border="false" rangeSeparator="-" :clear-icon="false">
					</uni-datetime-picker>
				</view>
			</view>
			<view class="item" v-for="(dt,index) in formList" :key="index">
				<text class="label">{{dt.label}}</text>
				<view class="con">
					<uni-data-checkbox v-if="dt.inputType=='radio'" v-model="dt[dt.key]" :localdata="dt.lists" />
					<hpy-form-select v-else-if="dt.inputType=='select'" class="mypicker" :dataList="dt.lists" :text="dt.text || 'text'" :name="dt.id || 'id'" v-model="dt[dt.key]" hideBorder hideArrow />
					<input v-else class="shinput" v-model="dt[dt.key]" :placeholder="dt.label" />
				</view>
			</view>
			<view class="btnBox">
				<view class="btn" @click="resetData">重置</view>
				<view class="btn btn2" @click="search">查询</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import bodyWrap from "@/components/bodyWrap/index.vue"
	import {dateFormat} from "@/utils/common.js"
	export default defineComponent({
		components:{
			bodyWrap
		},
		props:{
			formList:{
				type:Array,
				default:[]
			},
			defaultDate:{ // 默认日期
				type:Array,
				default:[]
			}
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				range: ["", ""],
				show:false
			})
			
			onMounted(()=>{
				dateInit() // 日期初始化
			})
			
			const dateInit = ()=>{
				//console.log("defaultDate:",props.defaultDate)
				// let date = new Date();
				// state.range[0] = dateFormat('Y-m-d', date.getTime() - (86400 * 90) * 1000)
				// state.range[1] = dateFormat('Y-m-d', date.getTime())
				state.range = []
				state.range[0] = props.defaultDate[0]
				state.range[1] = props.defaultDate[1]
			}
			
			const changeDateTime =(e)=> {
				state.range[0] = e[0]
				state.range[1] = e[1]
			}
			
			const showDrawer =() => {
				state.show = !state.show;
			}
			
			const resetData = ()=>{
				dateInit()
				props.formList.forEach(item =>{
					item[item.key] = ''
				})
			}
			
			const search = ()=>{
				let searchObj = {
					createTimeStart:state.range[0],
					createTimeEnd:state.range[1]
				}
				props.formList.forEach(item =>{
					item[item.key] && (searchObj[item.key] = item[item.key])
				})
				context.emit('comfirm',searchObj)
				state.show = false
			}
			
			
			return {
				...toRefs(state),
				changeDateTime,
				showDrawer,
				resetData,
				search
			}
		}
	})
</script>

<style lang="scss" scoped>
	.topSearchbox{
		position: fixed;
		z-index: 10;
		width: 100%;
		left: 0;
		top: var(--window-top);
		height: 100rpx;
		background: #f3f1f4;
		.tjrq {
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			height: 100%;
			padding: 0 20rpx;
			border: 1px solid #dddade;
			.daterange {
				flex: 1;
				display: flex;
				flex-direction: row;
				align-items: center;
				.lb{}
				.rqbox{
					display: flex;
					flex: 1;
					//border: 1px solid #eee;
					//background: #fff;
					height: 60rpx;
					align-items: center;
				}
			}
			.scbtn{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 80rpx;
				font-size: 30rpx;
				color: #238de8;
				text-align: right;
				.img{
					display: block;
					width: 100%;
					height: auto;
					opacity: 0.5;
				}
				.close{
					display: block;
					width: 50rpx;
					height: auto;
					opacity: 0.5;
				}
			}
		}
		.searchbox{
			position: absolute;
			box-sizing: border-box;
			z-index: 10;
			left: 0;
			top: 100rpx;
			width: 100%;
			background: #f3f1f4;
			//box-shadow: 0 0 10rpx #8d8c8e;
			box-shadow:0 8px 10px -8px #8d8c8e;
			padding:40rpx 20rpx;
			font-size: 28rpx;
			.item{
				display: flex;
				height: 80rpx;
				margin: 0 0 30rpx 0;
				.label{
					width: 140rpx;
					line-height: 80rpx;
				}
				.con{
					display: flex;
					align-items: center;
					box-sizing: border-box;
					flex: 1;
					border: 1px solid #eee;
					overflow: hidden;
					&.time{
						box-sizing: border-box;
						position: relative;
						z-index: 11;
						background: #fff;
						line-height: 80rpx;
						overflow: hidden;
						.rq{
							float: left;
						}
						.fg{
							float: left;
							padding: 0 30rpx;
						}
						.mydpdate{
							position: absolute;
							z-index: 11;
							left: 0;
							top: 0;
							width: 100%;
							height:100%;
							opacity: 1;
						}
					}
					.shinput{
						display: block;
						box-sizing: border-box;
						width: 100%;
						height: 100%;
						border: 0;
						padding: 0 20rpx;
						font-size: 28rpx;
						background: #fff;
					}
					&.con2{
						background: #fff;
						padding: 0 0 0 10rpx;
						
					}
					.mypicker{
						flex: 1;
						background: #fff;
						padding: 0 0 0 10rpx;
					}
				}
			}
			.btnBox{
				display: flex;
				height: 80rpx;
				padding: 0 0 0 140rpx;
				.btn{
					flex: 1;
					border: 1px solid #cac7cc;
					border-radius:20rpx ;
					text-align: center;
					line-height: 80rpx;
					background: #fff;
					&+.btn{
						margin-left: 30rpx;
					}
					&.btn2{
						background:#f99a14;
						color: #fff;
						border:0
					}
				}
			}
		}
	}
</style>
